<!-- 编辑弹窗 -->
<template>
    <ele-modal
      width="30%"
      :movable="false"
      :visible="visible"
      :close-on-click-modal="true"
      custom-class="ele-dialog-form"
      :title="isUpdate ? '修改期初信息' : '添加期初信息'"
      @update:visible="updateVisible" 
    >
    <el-form ref="form" :model="form" :rules="rules" label-width="100px" >
        <el-card  >        
          <el-row :gutter="24">
            <el-col :md="24" :sm="24">
              <el-form-item label="期初金额:" prop="amount">
                <el-input v-model="form.amount" placeholder="请输入期初金额"   @change="setAmount" >
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :md="24" :sm="24">
              <el-form-item label="汇率:" prop="rate">
                <el-input v-model="form.rate"  placeholder="请输入汇率"   @change="setAmount">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :md="24" :sm="24">
              <el-form-item label="期初金额(￥):" >
                <el-input v-model="form.amountCn" disabled  >
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :md="24" :sm="24">
              <el-form-item label="期初日期:" prop="setDate">
                <el-date-picker v-model="form.setDate" value-format="yyyy-MM-dd" format="yyyy-MM-dd" type="date" style="width: 100%;">
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>
    </el-form>
    <div slot="footer">
      <el-button @click="updateVisible(false)">取消</el-button>
      <el-button type="primary" v-show="this.btnIndex!=3" :loading="loading" @click="save" >
        保存
      </el-button>
    </div>
    </ele-modal>
  </template>
  <script>
   
   import { isIntegerOrDecimal8 } from '@/utils/validate';
   import { QueryModelByScurrencyId } from '@/api/basicdatamanager/ratemanager';
   import { GetBankLintsettingById, UpdateBankLintsetting,AddBankLintsetting } from '@/api/basicdatamanager/bankaccount';
    export default {
      name: 'BeginsettingEdit',
      props: {
        // 弹窗是否打开
        visible: Boolean,
        // 修改回显的数据
        data: Object,
        // 按钮索引
        btnIndex:String,
      },
      data() {
        return {
          // 表单数据
          form: {amount:0,setDate:new Date(),amountCn:0,rate:1},
          // 表单验证规则
          rules: {
            rate: [{required: true,message: '请输入汇率',trigger: 'blur'},{validator:isIntegerOrDecimal8,trigger:'blur'}],
            amount: [{required: true,message: '请输入期初金额',trigger: 'blur'},{validator:isIntegerOrDecimal8,trigger:'blur'}],
            setDate: [{required: true,message: '请输入期初日期',trigger: 'blur'}],
          },
          // 提交状态
          loading: false,
          // 是否是修改
          isUpdate: false,
          HBTypeDatas:[],
          computeDirection:2,//默认奈拉
        };
      },

    
      methods: {
  
        /* 保存编辑 */
        save() {
          //校验必填信息
          this.$refs['form'].validate((valid) => {
            if (!valid) {return false;}

            //品牌Id 单位Id
            if(this.form.unitId && this.form.unitId==this.form.unitDesc) this.form.unitId = '';

            this.loading = true;
            const saveOrUpdate = this.isUpdate ? UpdateBankLintsetting : AddBankLintsetting;
            saveOrUpdate(this.form)
              .then((msg) => {
                this.loading = false;
                this.$message.success(msg);
                this.updateVisible(false);
                //回调父组件方法
                this.$emit('done');
              })
              .catch((e) => {
                this.loading = false;
                this.$message.error(e.message);
              });
          });
        },

        setData(id){
          GetBankLintsettingById(id)
            .then((res) => {
              if(res){
                this.form = res; 
                this.isUpdate =true;
              }else{
                this.isUpdate =false;
                this.form.bankAccountId = id; 
              }
          });
        },

        setAmount(){
          this.form.amountCn= 0;
          if(this.form.amount && this.form.rate){
            this.form.amountCn= this.computeDirection ==1? (this.form.amount*this.form.rate).toFixed(4):(this.form.amount/this.form.rate).toFixed(4);
          }
        },

        /* 设置币种汇率运算符 */
        setCurrencyRate(currencyId){

          QueryModelByScurrencyId(currencyId).then((res)=>{
            if(res){
              this.computeDirection = res.computeDirection;
            }
          });
        },

        /* 更新visible */
        updateVisible(value) {
          //更新父组件中的visible的值
          this.$emit('update:visible', value);
        },
    },
     
      /* 监听visible属性变化 */
      watch: {
        visible(visible) {
          if (visible) {
            if (this.data && this.data.id) {
              //赋值this.form
              this.form = {amount:0,setDate:new Date(),amountCn:0,rate:1};
              this.setData(this.data.id);
              this.setCurrencyRate(this.data.currencyId);
              this.isUpdate = this.data.id !=null && this.data.id !=undefined;
            } else {
              this.form={amount:0,setDate:new Date(),amountCn:0,rate:1};
              this.isUpdate = false;
            }
          } else {
              this.$refs['form'].clearValidate();
              this.form = {amount:0,setDate:new Date(),amountCn:0,rate:1};
          }
        }
      }
    };
  </script>